/*
 * @Author: yuelei 
 * @Date: 2018-03-27 14:03:00 
 * @Last Modified by: Yuelei
 * @Last Modified time: 2018-05-16 23:47:15
 */

//  购物车页面

import React from 'react'
import PropTypes from "prop-types";
import { Layout, Row, Col, Button, Input, Divider, Modal } from 'antd'
import { withRouter } from "react-router";

import ItemCard from "../../component/ShoppingCard/index.jsx";
import IconBar from '../../images/shoppingBar2.png'
import IconBar2 from '../../images/shoppingConfirm.png'
import './index.scss'
import DefaultProdImg from "../../images/prod_img_540x260.jpg"



function UserInfo({ sex, user, tel }) {
  const sex_map = {
    male: "先生", female: "女士"
  }
  return (
    <div>
      <h4>{user} {sex_map[sex]}</h4>
      <h4>{tel}</h4>
    </div>
  )
}

function ShoppingInfo({ prods }) {

  const pieces = prods.reduce((res, prod) => res + prod.number, 0);
  const prices = prods.reduce((res, prod) => res + prod.number * prod.price, 0);

  return (
    <div>
      <Row type="flex" justify="space-between">
        <span>总计:</span>
        <span>{pieces} 件</span>
      </Row>
      <Row type="flex" justify="end" >
        <span>{prices} 元</span>
      </Row>
    </div>
  )
}

class ShoppingCart extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      is_confirming: false
    }
  }

  toggleConfirmStatue() {
    const { is_confirming } = this.state;
    this.setState({ is_confirming: !is_confirming });
  }

  /**
   * 拼装Products Info For items.
   */
  getProductsFromShoppingCart() {
    console.log(this.props);
    const { shopping_cart: { productions }, classes } = this.props;
    const { handle_item_count_change } = this.props;
    const { is_confirming } = this.state;
    const { handle_item_note_change}=this.props

    const prods = [];
  
    for (let prod_id in productions) {

      let find_one = false;
      for (let class_ of classes) {
        if (class_.brands === undefined) continue;
        for (let brand of class_.brands) {
          if (brand.productions === undefined) continue;
          for (let prod of brand.productions) {
            if (prod_id === `${prod.id}`) {
              prods.push({
                name: prod.name,
                id: prod.id,
                price: prod.price,
                number: productions[prod_id].count,
                img_src: prod.img_src || DefaultProdImg,
                note:productions[prod_id].note,
                onNote:(p_id,p_note)=>handle_item_note_change({prodId: p_id, new_notes:p_note}),
                onAdd: () => handle_item_count_change({ prodId: `${prod.id}`, new_count: productions[prod_id].count + 1 }),
                onMinus: () => handle_item_count_change({ prodId: `${prod.id}`, new_count: productions[prod_id].count - 1 }),
                disable_count_change: is_confirming
              });
              find_one = true;
              break
            }
          }
          if (find_one) break;
        }
        if (find_one) break;
      }
    }
 
    return prods;
  }


  /**
   * 提交选单并跳转至结束页面
   */
  hanlde_order_submit_wrapper() {
    const { handle_order_submit, history } = this.props;
    handle_order_submit();
    history.push("/finish");
  }

  on_submit_clicked() {
    Modal.confirm({
      title: '确认提交',
      onOk: ()=>{
        this.hanlde_order_submit_wrapper();
      },
      onCancel:()=>{
        this.toggleConfirmStatue();
      },
      okText: "提交",
      cancelText: "取消"
    });
  }
  render() {
    const { is_confirming } = this.state;
    const { rsider_width } = this.props;

    const { shopping_cart: { notes, productions }, classes, user, tel, sex } = this.props;

    const { handle_item_note_change,handle_item_count_change, handle_note_change, handle_order_submit } = this.props;

    const prods = this.getProductsFromShoppingCart();
    
    return (
      <Layout className="shopping_cart_container">
        <Layout.Content className="shopping_cart_items">

          {prods.map(prod => <ItemCard key={prod.id} {...prod} />)}

        </Layout.Content>
        <Layout.Sider className="shopping_cart_rsider" width={rsider_width}>
    
      
          <Layout className="shopping_cart_note">
            {
              !is_confirming
                ?
                <div>
                  <Layout>
                    <div style={{height:'3%',textAlign:'center',paddingTop:'3px'}}>
                      <img src={IconBar} alt=""/>
                    </div>
                    <Divider style={{margin:'5px',fontFamily:''}} ></Divider>
                  </Layout>
                  <Layout style={{padding:'15px 10px'}}>
                 
                <Input.TextArea value={notes} onChange={(e) => handle_note_change(e.target.value)} autosize={{ minRows: 8, maxRows: 24 }} placeholder="备注" />
               </Layout> 
               </div> :
               <div>
                    <Layout>
                    <div style={{height:'3%',textAlign:'center',paddingTop:'3px'}}>
                      <img src={IconBar2} alt=""/>
                    </div>
                   
                  </Layout>
               
                <div className="shopping_cart_info">
                  <UserInfo user={user} tel={tel} sex={sex} />
                  <Divider  />
                  <ShoppingInfo prods={prods} />
                  <Divider />
                  {
                    notes
                    &&
                    <div>
                      <h4>备注</h4>
                      <p>{notes}</p>
                    </div>
                  }

                </div>
                </div>
            }

          </Layout>
          <Layout className="shopping_cart_btn_group">
            {/* <Row className="shopping_cart_btn"> <Button>继续购物</Button> </Row> */}
            <Row className="shopping_cart_btn">
              {
                !is_confirming
                  ?
                  <Button type="primary" onClick={this.toggleConfirmStatue.bind(this)}>确认订单</Button>
                  :
                  <Button type="primary" onClick={this.on_submit_clicked.bind(this)}>提交订单</Button>
              }
            </Row>
          </Layout>
        </Layout.Sider>
      </Layout>
    );
  }
}

ShoppingCart.propTypes = {
  user: PropTypes.string,
  tel: PropTypes.string,
  sex: PropTypes.string,
  shopping_cart: PropTypes.object.isRequired,  // To clearify!!
  handle_item_count_change: PropTypes.func.isRequired,
  handle_item_note_change:PropTypes.func.isRequired,
  handle_order_submit: PropTypes.func.isRequired,
  handle_note_change: PropTypes.func.isRequired,
  classes: PropTypes.arrayOf(PropTypes.object), // To clearify!!

  rsider_width: PropTypes.number
}

ShoppingCart.defaultProps = {
  rsider_width: 280
}

export default withRouter(ShoppingCart)